<template>
  <div v-for="(item, index) in list" :key="index" ref="items">
    {{ item.name }}
  </div>
</template>
<script setup lang="ts">
// 当在 v-for 中使用模板引用时，对应的 ref 中包含的值是一个数组
// 它将在元素被挂载后包含对应整个列表的所有元素：
// 应该注意的是，ref 数组并不保证与源数组相同的顺序。
import { useTemplateRef, ref } from 'vue'

const list = ref([
  {
    name: '1',
    age: 1,
  },
  {
    name: '2',
    age: 2,
  },
  {
    name: '3',
    age: 3,
  },
])

const itemRefs = useTemplateRef('items') //3.5+ 之后可用
console.log('itemRefs', itemRefs) //  返回一个数组
</script>

<style scoped lang="scss"></style>
